<script setup>
import IconSimple from '@/components/icon-simple/index.vue'
import {ref, watch} from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'text'
  },
  preicon: String,
  subicon: String,
  placeholder: String,
  size: {
    type: Number,
    default: 24
  },
  small: Boolean,
  modelValue: [Number, String],
  placeholderStyle: String,
  textAlign: {
    type: String,
    default: 'left'
  },
  styles: {
    type: Object,
    default: () => ({})
  },
  inputStyles: {
    type: Object,
    default: () => ({})
  },
  subfixStyles: {
    type: Object,
    default: () => ({})
  },
  readonly: Boolean,
  disabled: Boolean,
  maxlength: {
    type: Number,
    default: -1
  }
})

const emit = defineEmits(['update:modelValue'])

const value = ref(props.modelValue || '')

watch(props, (newVal) => {
  if (newVal.modelValue !== value.value) {
    value.value = newVal.modelValue
  }
})

watch(value, (newVal) => {
  emit('update:modelValue', newVal)
})
</script>

<template>
  <view class="input-x-container" :class="{ 'input-x-small-container': props.small }" :style="{ ...props.styles }">
    <view class="prefix"><slot name="prefix"></slot></view>
    <view class="prefix-default" v-if="props.preicon" >
      <icon-simple :name="props.preicon" :size="props.size" />
    </view>
    <view class="input-x-bar-container">
      <input
        class="input-x-bar"
        :type="props.type"
        :placeholder="props.placeholder"
        :style="{ textAlign: props.textAlign, ...props.inputStyles }"
        :placeholder-style="props.placeholderStyle"
        :readonly="props.readonly"
        :disabled="props.disabled"
        :maxlength="props.maxlength"
        v-model="value"
      />
    </view>
    <view class="subfix" :style="{ ...props.subfixStyles }"><slot name="subfix"></slot></view>
    <view class="subfix-default" v-if="props.subicon" >
      <icon-simple :name="props.subicon" :size="props.size" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.input-x-container {
  display: flex;
  align-items: center;
  padding: 28rpx 24rpx;
  border-radius: 32rpx;
  background-color: $kaoyan-color-13;
}
.input-x-small-container {
  padding: 0 24rpx;
}
.prefix-default,
.subfix-default {
  display: none;
  width: 48rpx;
  height: 48rpx;
}
.prefix-default {
  margin-right: 16rpx;
}
.subfix-default {
  margin-left: 16rpx;
}
.prefix:empty + .prefix-default,
.subfix:empty + .subfix-default {
  display: flex;
}
.prefix:empty,
.subfix:empty {
  display: none;
}
.input-x-bar-container {
  flex: 1;
  .input-x-bar {
    width: 100%;
    height: 56rpx;
    line-height: 56rpx;
    font-size: 36rpx;
    font-style: normal;
    font-weight: 400;
    color: $kaoyan-color-9;
    &::-webkit-input-placeholder,
    &::-ms-input-placeholder,
    &:-moz-placeholder,
    &::-moz-placeholder {
      color: $kaoyan-color-11;
      font-size: 36rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 56rpx;
    }
  }
}
.subfix {
  padding-left: 16rpx;
  color: $kaoyan-color-10;
  text-align: right;
  font-size: 36rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 50rpx;
}
.subfix:empty {
  padding-left: 0;
}
</style>
